<style>
    .dd {
        position:relative;
        display:block;
        margin:0;
        padding:0;
        max-width:600px;
        list-style:none;
        font-size:13px;
        line-height:20px;
    }
    .dd-list {
        display:block;
        position:relative;
        margin:0;
        padding:0;
        list-style:none;
    }
    .dd-list .dd-list {
        padding-left:30px;
    }
    .dd-collapsed .dd-list {
        display:none;
    }
    .dd-item,.dd-empty,.dd-placeholder {
        display:block;
        position:relative;
        margin:0;
        padding:0;
        min-height:20px;
        font-size:13px;
        line-height:20px;
    }
    .dd-handle {
        display:block;
        height:30px;
        margin:5px 0;
        padding:5px 10px;
        color:#333;
        text-decoration:none;
        font-weight:bold;
        border:1px solid #ccc;
        background:#f2f2f2;
        -webkit-border-radius:3px;
        border-radius:3px;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
    }
    .dd-handle:hover {
        color:#2ea8e5;
        background:#fff;
    }
    .dd-item > button {
        display:block;
        position:relative;
        cursor:pointer;
        float:left;
        width:25px;
        height:20px;
        margin:5px 0;
        padding:0;
        text-indent:100%;
        white-space:nowrap;
        overflow:hidden;
        border:0;
        background:transparent;
        font-size:12px;
        line-height:1;
        text-align:center;
        font-weight:bold;
    }
    .dd-item > button:before {
        content:'+';
        display:block;
        position:absolute;
        width:100%;
        text-align:center;
        text-indent:0;
    }
    .dd-item > button[data-action="collapse"]:before {
        content:'-';
    }
    .dd-placeholder,.dd-empty {
        margin:5px 0;
        padding:0;
        min-height:30px;
        background:#f2fbff;
        border:1px dashed #b6bcbf;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
    }
    .dd-empty {
        border:1px dashed #bbb;
        min-height:100px;
        background-color:#e5e5e5;
        background-image:-webkit-linear-gradient(45deg,#fff 25%,transparent 25%,transparent 75%,#fff 75%,#fff),-webkit-linear-gradient(45deg,#fff 25%,transparent 25%,transparent 75%,#fff 75%,#fff);
        background-image:-moz-linear-gradient(45deg,#fff 25%,transparent 25%,transparent 75%,#fff 75%,#fff),-moz-linear-gradient(45deg,#fff 25%,transparent 25%,transparent 75%,#fff 75%,#fff);
        background-image:linear-gradient(45deg,#fff 25%,transparent 25%,transparent 75%,#fff 75%,#fff),linear-gradient(45deg,#fff 25%,transparent 25%,transparent 75%,#fff 75%,#fff);
        background-size:60px 60px;
        background-position:0 0,30px 30px;
    }
    .dd-dragel {
        position:absolute;
        pointer-events:none;
        z-index:9999;
    }
    .dd-dragel > .dd-item .dd-handle {
        margin-top:0;
    }
    .dd-dragel .dd-handle {
        -webkit-box-shadow:2px 4px 6px 0 rgba(0,0,0,.1);
        box-shadow:2px 4px 6px 0 rgba(0,0,0,.1);
    }

</style>
<div class="layui-fluid" lay-title="权限管理">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
            <form class="layui-card layui-form" layui-filter="add-auth">
                <div class="layui-card-header">添加权限 <a href="#/icon/index" class="layui-btn layui-btn-xs">icon</a></div>
                <div class="layui-card-body layui-row layui-col-space10">

                    <p>
                        <span class="layui-badge-dot layui-bg-black"></span>
                        菜单、按钮权限会在登陆时返回给前端，api权限会在用户请求时判断操作权限
                    </p>
                    <div class="layui-col-md12">
                        <input type="text" name="auth_name" placeholder="权限名" autocomplete="off" lay-verify="required" class="layui-input">
                    </div>
                    <div class="layui-col-md6">
                        <input type="text" name="auth_rules" placeholder="权限标识,菜单/api权限为url"  lay-verify="required" autocomplete="off"
                               class="layui-input">
                    </div>
                    <div class="layui-col-md6">
                        <input type="text" name="auth_icon" placeholder="layui图标,首级菜单权限有效" autocomplete="off"
                               class="layui-input">
                    </div>
                    <div class="layui-form-item">
                        <input type="radio" name="auth_type" value="1" title="菜单" checked>
                        <input type="radio" name="auth_type" value="2" title="按钮">
                        <input type="radio" name="auth_type" value="3" title="api">
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="add-auth">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">权限排序</div>
                <div class="layui-card-body layui-row layui-col-space10">
                    <p>
                        <span class="layui-badge-dot layui-bg-orange"></span>
                        排序决定菜单类型权限显示，其他只为分类好区分
                        <button id="save_menu" class="layui-btn layui-btn-xs">保存排序</button>
                    </p>
                    <div class="dd" id="auth_list_bd">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 第二行 -->

    <div class="layui-row layui-col-space15">
        <!-- 留空占用 -->
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">查看缓存</div>
                <div class="layui-card-body layui-row layui-col-space10">
                    <button class="layui-btn" id="showCache">查看</button>

                    <button class="layui-btn" data-siam-auth="!testtets">没有testtets权限则显示</button>
                    <button class="layui-btn" data-siam-auth="/api/*">有/api/*权限则显示</button>
                    <button class="layui-btn" data-siam-auth="/admin/*">有/admin/*权限则显示</button>

                    <div id="showCacheRes"></div>
                </div>
            </div>
        </div>

        <!-- 清除权限缓存 -->
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">清空缓存</div>
                <div class="layui-card-body layui-row layui-col-space10">
                    <button class="layui-btn" id="clearCache">清空</button>
                    <div id="clearCacheRes"></div>

                </div>
            </div>
        </div>
    </div>
</div>


<script id="auth_list_tpl" type="text/html">
    {{#
    function siam(data,index){
        if(!data || data.length === 0) return '';
        var html = '<ol class="dd-list">';
        layui.each(data,function(i,item){
            html += '<li class="dd-item" data-id="' + item.auth_id+ '">';
            if(item.childs && item.childs.length > 0){
                html += '<button data-action="collapse" type="button">Collapse</button>';
                html += '<button data-action="expand" type="button" style="display: none;">Expand</button>';
            }

            html += '<div class="dd-handle">' + item.auth_name;
            switch(item.auth_type){
                case 1:
                    html += ' <span class="layui-badge">菜单</span>';
                    break;
                case 2:
                    html += ' <span class="layui-badge layui-bg-orange">按钮</span>';
                    break;
                case 3:
                    html += ' <span class="layui-badge layui-bg-green">api</span>';
                    break;

            }
            html +='</div>';
            if(item.childs) html += siam(item.childs,index+1);
                html += '</li>';
            });

            html += "</ol>";
            return html;
        };
    }}
    {{ siam(d, 1) }}

</script>


<script>
    layui.use(['admin', 'form', 'jquery', 'nestable', 'laytpl'], function (admin, form) {
        var $ = layui.jquery;
        var element = layui.element;
        var nestable = layui.nestable;
        var laytpl = layui.laytpl;

        $('.dd').nestable();

        $("#save_menu").on('click', function () {
            let menu = $('.dd').nestable('serialize');
            // 保存权限列表
            admin.post({
                api: 'saveAuthList',
                data: {
                    order: JSON.stringify(menu)
                },
                success: function (res) {
                    layui.view.tab.refresh();
                }
            })

        });

        form.render();
        element.render('breadcrumb', 'breadcrumb');

        form.on('submit(add-auth)', function (data) {
            admin.post({
                api: "addAuth",
                data: data.field,
                success: function (res) {
                    layer.alert('添加成功',{
                        yes:function () {
                            layui.view.tab.refresh();
                            layer.closeAll();
                        }
                    });
                }
            });
            return false;
        });

        // 加载右侧权限列表
        admin.post({
            api: 'getAuthList',
            success: function (res) {
                let tpl = $("#auth_list_tpl").html();
                laytpl(tpl).render(res.result, function (html) {
                    $("#auth_list_bd").html(html);
                });
            }
        });

        // 清空缓存
        $("#clearCache").on('click',function () {
            admin.post({
                api: 'clearCache',
                success:function(res){
                    $("#clearCacheRes").html(res.result.res);
                }
            })
        });

        // 查看缓存
        $("#showCache").on('click',function () {
            admin.post({
                api: 'showCache',
                success:function(res){
                    $("#showCacheRes").html(res.result.res);
                }
            })
        });

        // 手动调用验证权限
        if ( layui.siam.vifAuth('/api/system/clearCache')){
            layer.msg('有/api/system/clearCache的权限');
        }else{
            layer.msg('没有/api/system/clearCache的权限');
        }

    });
</script>
